<?php require 'base/header.php'; ?>

<?php
// Costruisce un array (in notazione javascript) con i punti da inserire nella mappa
// Lo usiamo anche per controllare se mostrare o meno la mappa (TODO: se altri raccomandati?)
$array_javascript_punti = '';
if (isset($events))
	foreach ($events as $i)
		if (isset($i['latitude'])){
			if (isset($i['location']) && trim($i['location']) != "")
				$location = ", location: \"@ ".$i['location']."\"";
			else
				$location = ", location: ''";
			$array_javascript_punti .= '{ lat: '.$i['latitude'].', lng: '.$i['longitude'].', id: '.$i['id_evento'].',
				tipo: "evento", nome: "'.$i['nome'].'", dati: '.json_encode($i).', categoria: "'.$i['categoria'].'" '.$location.' },';
		}
if (isset($locali))
	foreach ($locali as $i)
		if (isset($i['latitude']))
			$array_javascript_punti .= '{ lat: '.$i['latitude'].', lng: '.$i['longitude'].', id: '.$i['id_locale'].',
				tipo: "locale", nome: "'.$i['nome_locale'].'", dati: '.json_encode($i).', categoria: "'.$i['categoria'].'" , nome_logo: "'.$i['nome_logo'].'" },';
?>
	    <div class="to_intro_menu">
			<?php if (!$tab) { ?>
				<h1 style="color: #FF5E99; font-size: 150%"><?php echo ucwords($titolo_pagina); ?></h1>
			<?php } ?>
			<div class="clear"></div>
        </div>
		<div class="to_grey_wdg_xl" id="eventi_raccomandati_x1" <?= $facebook->getUser() ? 'style="display: none"' : '' ?> > 
			<div class="to_grey_wdg_xl_ins">
				<div id="eventi_raccomandati">
					<h2 style="color: #FF5E99; font-size: 120%">Lo sapevi che?</h2>
					Se ti connetti a &#171;staSera?&#187; tramite il tuo account Facebook puoi scoprire quali sono gli eventi che i tuoi amici ti consigliano!
				</div>
			</div>
		</div>

	<?php if ($array_javascript_punti != '') { ?>

		<!-- L'evento in promozione -->
		<div style="width: 470px; height: 50px; margin-bottom: 14px; float: left; background-color: #eee; font-size: 16px; padding: 10px">
			<a href="<?= site_url('stasera/evento/116') ?>"><img src="<?= base_url() ?>/upload/prom_small.png" alt="Gilby Clarke + J27 al Borderline Club" width="50" height="50" style="float: left; margin-right: 20px" /></a>
			Il <b style="font-size: 120%">17 giugno</b> al <a style="font-size: 120%" href="<?= site_url('stasera/locale/69') ?>">Borderline Club</a> di Pisa, <br />
			<a style="font-size: 120%" href="<?= site_url('stasera/evento/116') ?>"><b>Gilby Clarke + J27 in Electric Jam</b></a>. Imperdibili!
		</div>

		<!-- Il comando mostra/nascondi mappa e il div della mappa -->
		<div id="div_toggle_mappa" style="display: inline-block; width: 120px; height: 70px; text-align: center; padding-top: 4px; float: right; cursor: pointer">
			<a id="comando_toggle_mappa"><img src="<?= base_url() ?>images/map_icon.gif" alt="Mostra o nascondi mappa" /><br /><span id="testo_toggle_mappa" style="color: #777">Mostra mappa</span></a>
		</div>
		<div style="clear: both"></div>
		<div class="to_grey_wdg_xl" id="div_contenitore_mappa" style="display: none;">
			<div class="to_grey_wdg_xl_ins">
				<?php $carica_api_maps = 'async'; ?>
				<div id="mappa" style="width: 600px; height: 300px;"></div>
			</div>
		</div>

	<?php } /* endif (array_javascript_punti != '') */ ?>


		<?php if ((!isset($locali) && !isset($events)) || (!isset($events) && isset($param_ricerca['data_inizio']))) { ?>
			<div style="margin-top: 25px; margin-bottom: 60px; margin-left: 20px; width: 600px">
			<b style="font-size: 120%">Nessun elemento corrisponde ai criteri specificati.</b>
			<img src="<?= base_url().'apple-touch-icon.png' ?>" height="130" width="130" style="float: right;" />
			<p style="margin-top: 10px">Prova a inserire meno termini o utilizzare il menu a destra per una veloce panoramica di eventi e locali presenti sul sito (ad esempio <?= anchor('stasera/index/pub', 'pub') ?> o <?= anchor('stasera/index/concerti', 'concerti') ?>).</p>
			<p style="margin-top: 10px"><b>Suggerimento:</b> 
			<?php if (isset($param_ricerca['data_inizio'])) { ?>
				Prova a <a href="<?= htmlspecialchars($param_ricerca['url_tutti']) ?>">ripetere la ricerca senza vincoli di tempo</a>.
			<?php } else { ?>
				Puoi inserire date (esempio: <i>domani</i>, <i>giovedì</i>, <i>10 luglio</i>), mesi, categorie o parole. La ricerca considera tutti i nomi e le descrizioni di eventi e locali.
			<?php } ?>
			</p>
			</div>
		<?php } ?>

		<?php if (isset($events)) {?>
<?php
// Costruiamo le URL per il filtro sulla data
function sostituisci_date($di, $df, $url_base) {
	return str_replace('DATAFINE', date('Y-m-d', $df), str_replace('DATAINIZIO', date('Y-m-d', $di), $url_base));
}

$url_base = htmlspecialchars($param_ricerca['url_base']);
$url_tutti = htmlspecialchars($param_ricerca['url_tutti']);

$oggi = strtotime('today');
$url_oggi = sostituisci_date($oggi, $oggi, $url_base);
$url_domani = sostituisci_date(strtotime('tomorrow'), strtotime('tomorrow'), $url_base);

/* TODO: Per ora settimana e mese fanno +7 e +30 giorni.
 *       Bisogna davvero rispettare i limiti del mese e della settimana? */
$url_settimana = sostituisci_date($oggi, strtotime('next week'), $url_base);
$url_mese = sostituisci_date($oggi, strtotime('next month'), $url_base);
?>

<script>// <![CDATA[
// Gestione selettore periodo custom (richiamato da js/selectBox.js)
// http://jqueryui.com/demos/datepicker/#date-range


var data_scelta_inizio = null, data_scelta_fine = null;

function inizializza_datepickers() {
	$.datepicker.setDefaults($.datepicker.regional["it"]);
	var picks = $("#datepick_inizio, #datepick_fine").datepicker({
		dateFormat: 'd-m-yy',
		defaultDate: +1,
		selectOtherMonths: true,
		showAnim: 'blind',
		onSelect: function(selectedDate) {
			var option = this.id == "datepick_inizio" ? "minDate" : "maxDate",
				instance = $( this ).data("datepicker"),
				data = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
			picks.not(this).datepicker("option", option, data);

			data_norm = $.datepicker.formatDate('yy-mm-dd', data); 
			if (this.id == "datepick_inizio")
				data_scelta_inizio = data_norm;
			else data_scelta_fine = data_norm;

			if (data_scelta_inizio && data_scelta_fine) {
				var url = "<?= $url_base ?>";
				url = url.replace('DATAINIZIO', data_scelta_inizio);
				url = url.replace('DATAFINE', data_scelta_fine);
				window.location.href = url;
			}
		}
	});
}

// ]]></script>

		<div class="to_grey_wdg_xl branded"> 
			<div class="to_grey_wdg_xl_ins">
				<div style="float: left;"><h2 style="color: #FF5E99; font-size: 120%">Eventi:</h2></div>
				
				<div style="float: right;">
					<select name="fancySelect" class="makeMeFancy" style="display: none"> <!-- Non mostriamo se no javscript -->
						<option value="0" selected="selected" data-skip="1">Quando?</option>
						<option data-destinazione="<?= $url_oggi ?>" data-icon="<?=base_url() ?>/images/date/oggi.png" data-noimg="no">Oggi</option>

						<option data-destinazione="<?= $url_domani ?>" data-icon="<?=base_url() ?>/images/date/domani.png" data-noimg="no">Domani</option>

						<option data-destinazione="<?= $url_settimana ?>" data-icon="<?=base_url() ?>/images/date/questa_settimana.png" data-noimg="no">Questa settimana</option>

						<option data-destinazione="<?= $url_mese ?>" data-icon="<?=base_url() ?>/images/date/questo_mese.png" data-noimg="no">Questo mese</option>
						
						<option data-destinazione="<?= $url_tutti ?>" data-icon="<?=base_url() ?>/images/date/tutti.png" data-noimg="no">Tutti</option>
						

						<option data-periodo="1">Periodo</option><!-- L'HTML è in js/selectBox.js -->
					</select>
				</div>

				<noscript>
					<div style="clear: both;"></div>
					<p style="padding: 10px">Eventi di: &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<a href="<?= $url_oggi ?>">Oggi</a>
					&#160;&#160;&#160;&#160;&#160;&#160;<a href="<?= $url_domani ?>">Domani</a> 
					&#160;&#160;&#160;&#160;&#160;&#160;<a href="<?= $url_settimana ?>">Questa settimana</a>
					&#160;&#160;&#160;&#160;&#160;&#160;<a href="<?= $url_mese ?>">Questo mese</a>
					&#160;&#160;&#160;&#160;&#160;&#160;<a href="<?= $url_tutti ?>">Tutti</a>
					</p>
				</noscript>

				<div style="clear: both;"></div>
				<?php require 'util/lista_eventi.php'; ?>
				<?php if ($tab == 'home') { ?>
					<div style="width: 100%; text-align: right">
						<a style="color: #777; margin-right: 40px" href="<?= site_url('stasera/eventi') ?>">Altri...</a>
					</div>
				<?php } ?>
				<?php if (isset($max_eventi) && $max_eventi) {
					// Suggerisce ultimo giorno + 1 anno
					$url_prosegui = sostituisci_date($ultima_data_visualizzata, $ultima_data_visualizzata+31556926, $url_base);
				?>
					<div style="width: 100%; text-align: right">
					<span style="color: #222; margin-right: 40px">... e <a href="<?= $url_prosegui ?>">altri ancora nei giorni successivi</a>.</span>
					</div>
				<?php } ?>
			</div>
		</div>
		
		<div style="margin-bottom: 10px"><div class="segnaposto_ad" style="width: 620px; height: 70px">Pubblicità 620x70</div></div>
		<?php } ?>
		
		<?php if (isset($locali)) { ?>
		<div class="to_grey_wdg_xl"> 
			<div class="to_grey_wdg_xl_ins"> 
				<h2 style="color: #FF5E99; font-size: 120%"><?= ($tab == 'home') ? 'Nuovi locali:' : 'Locali:' ?></h2>
				<?php require 'util/lista_locali.php'; ?>
				<?php if ($tab == 'home') { ?>
					<div style="width: 100%; text-align: right">
						<a style="color: #777; margin-right: 40px" href="<?= site_url('stasera/locali') ?>">Altri...</a>
					</div>
				<?php } ?>
			</div>
		</div>
		<?php } ?>



	    <div class="clear"></div>
            <div class="to_column left">
		<div class="segnaposto_ad" style="width: 300px; height: 250px;">Pubblicità<br />300x250</div>
            </div>
            <div class="to_column right">
                <div class="to_block">
			<fb:recommendations></fb:recommendations>
			<fb:facepile></fb:facepile>
                </div>
            </div>
	    <div class="clear"></div>

<script type="text/javascript">//<![CDATA[

	// Raccomandazioni eventi
	esegui_al_login.push(function() {
		$.post('<?= site_url('partecipazione/eventi_raccomandati') ?>',
			{
				<?php if (isset($param_ricerca['categoria'])) echo 'categoria: "'.$param_ricerca['categoria'].'",'; ?>
				<?php if (isset($param_ricerca['ricerca'])) echo 'ricerca: "'.$param_ricerca['ricerca'].'",'; ?>
				<?php if (isset($param_ricerca['data_inizio'])) echo 'data_inizio: "'.$param_ricerca['data_inizio'].'",'; ?>
				<?php if (isset($param_ricerca['data_fine'])) echo 'data_fine: "'.$param_ricerca['data_fine'].'",'; ?>
				ci_csrf_token: $.cookie("ci_csrf_token")
			},
			function(eventi) {
				if (eventi.length == 0) {
					$("#eventi_raccomandati_x1").hide();
					return;
				}
			
				var div_elenco = $('<div style="background-color:#00C8F3; -moz-border-radius: 15px; -webkit-border-radius: 15px;  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  border-bottom: 1px solid rgba(0,0,0,0.25); text-decoration: none; margin: 5px; padding: 1px;"></div>');
				var elenco = $('<ul style="padding-left: 5px; height: 56px; display: table-cell; vertical-align: middle"></ul>');
				for (var i = 0; i < eventi.length; i++) {
					var e = eventi[i];
					var testo_partecipanti = (e.numero_partecipanti != 1) ? 'partecipano '+e.numero_partecipanti+' tuoi amici' : 'partecipa un tuo amico';
					$('<li style="margin: 5px; text-shadow: 0 2px 2px rgba(255, 255, 255, 0.95); font-size: 110%"><b><a href="<?=site_url('stasera/evento')?>/'+e.id_evento+'">'+e.nome+'</a></b> (' + testo_partecipanti + ')</li>').appendTo(elenco);
				
				}
				div_elenco.append(elenco);
				$("#eventi_raccomandati").html("");
				$("#eventi_raccomandati").append('<h2 style="color: #FF5E99; font-size: 120%">I tuoi amici ti suggeriscono:</h2><img src="<?=base_url() ?>/images/Facebook-48.png" style="float: left; padding: 10px; margin-right: 10px;" />').append(div_elenco).append('<div style="clear: both;"></div>');
				$("#eventi_raccomandati_x1").slideDown();
			},
			'json'
		);
	});

<?php if ($array_javascript_punti != '') { ?>
	// Gestione della mappa
	var punti = [ <?= $array_javascript_punti ?> ];
	var map;
	var marker_locali = [], marker_eventi = [];
	var info_locali = [], info_eventi = [];
	var rettangolo_markers;
	var listener_temporaneo;
	var zoom_iniziale_massimo = 17;
	var mappa_visibile = false;

	function aggiungi_marker(punto) {
		var latlng = new google.maps.LatLng(punto.lat, punto.lng);
		var image = '<?=base_url() ?>/images/food_icons/';
		
		
		switch(punto.categoria) {
			case "pub":
				image += 'beer_heineken-32x32.png';
			break;
			case "disco":
				image += 'Music-32.png';
			break;
			case "concerti":
				image += 'Stratocaster-guitar-blue-32.png';
			break;
			case "cinema":
				image += 'Cinema-Popcorn-32.png';
			break;
			case "cultura":
				image += 'Secret-book-32.png';
			break;
			default:
				image = '<?=base_url() ?>/images/icon_marker.png';
			break;
		}
		var contentString = '';
		if (punto.tipo == 'locale')
			contentString = '<div style="float: left;"><img src="<?= base_url() ?>/upload/'+punto.nome_logo+'" height="50px" /></div><div  style="float: left; margin-left:5px;"><h3 style="color: #FF5E99;">Locale <span style="font-size: 110%">&laquo;'+punto.nome+'&raquo;</span></h3><br/><a href="<?=base_url() ?>/stasera/locale/'+punto.id+'"><b>vai alla sua pagina</b></a></div><div  style="clear: both;"></div>';
		else
			contentString = '<div style="float: left;"><img src="'+image+'" height="32px" /></div><div  style="float: left; margin-left:5px;"><h3 style="color: #00C8F3;">&laquo;<span style="font-size: 110%">'+punto.nome+'</span>&raquo;</h3>'+punto.location+'<br/><a href="<?=base_url() ?>/stasera/evento/'+punto.id+'"><b>vuoi saperne di pi&ugrave;?</b></a></div><div  style="clear: both;"></div>';
		
		var infowindow = new google.maps.InfoWindow({
			content: contentString
		});
		
		var marker = new google.maps.Marker({
			map: map,
			position: latlng,
			title: punto.nome,
			icon: image
		});
		
		if (punto.tipo == 'locale') {
			marker_locali[punto.id] = marker;
		}
		else { 
			marker_eventi[punto.id] = marker;
		}
		
		google.maps.event.addListener(marker, 'click', function() {
		  infowindow.open(map,marker);
		});
		
		rettangolo_markers.extend(latlng);
	}

	function adatta_mappa_ai_marker() {
		// Adattiamo la mappa ai markers, ma senza zoomare troppo.
		// Il fitting non viene fatto immediatamente, quindi
		// impostiamo temporaneamente maxZoom e attendiamo il rendering 
		// per ripristinarlo al default.
		map.setOptions({maxZoom: zoom_iniziale_massimo});
		listener_temporaneo = google.maps.event.addListener(map, 'zoom_changed', function() {
			if (map.getZoom() <= zoom_iniziale_massimo) {
				// fitBounds completata, ripristiniamo maxZoom
				map.setOptions({maxZoom: null});
				google.maps.event.removeListener(listener_temporaneo);
				listener_temporaneo = null;
			}
		});
		map.fitBounds(rettangolo_markers);
	}

	function api_maps_caricata() {
		if (punti.length == 0)
			return;
		$("#comando_toggle_mappa").click(toggle_mappa);
	}

	function toggle_mappa() {
		if (mappa_visibile)
			nascondi_mappa();
		else mostra_mappa();
		mappa_visibile = !mappa_visibile;
	}

	function mostra_mappa() {
		$("#testo_toggle_mappa").text('Nascondi mappa');
		$("#div_contenitore_mappa").slideDown('fast');

		var myOptions = {
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			streetViewControl: true
		}
		map = new google.maps.Map(document.getElementById("mappa"), myOptions);

		rettangolo_markers = new google.maps.LatLngBounds();
		for (var i = 0; i < punti.length; i++)
			aggiungi_marker(punti[i]);
		adatta_mappa_ai_marker();
	}

	function nascondi_mappa() {
		$("#testo_toggle_mappa").text('Mostra mappa');
		$("#div_contenitore_mappa").slideUp('fast');
	}
<?php } /* if ($array_javascript_punti != '') */ ?>
//]]></script>

<?php require 'base/footer.php'; ?>
